<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据查询 - 宜居指数分析系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link th:href="@{/css/custom.css}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-cloud-sun"></i> 宜居指数分析系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/search">
                            <i class="fas fa-search"></i> 数据查询
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/compare">
                            <i class="fas fa-chart-bar"></i> 区域对比
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0">
                            <i class="fas fa-search"></i> 选择查询区域
                        </h4>
                    </div>
                    <div class="card-body">
                        <form id="searchForm" action="/dashboard" method="get">
                            <div class="mb-3">
                                <label for="province" class="form-label">省份</label>
                                <select class="form-select" id="province" name="province" required>
                                    <option value="">请选择省份</option>
                                    <option th:each="province : ${provinces}" th:value="${province}" th:text="${province}"></option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="city" class="form-label">城市</label>
                                <select class="form-select" id="city" name="city" required disabled>
                                    <option value="">请先选择省份</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="district" class="form-label">区县</label>
                                <select class="form-select" id="district" name="district" required disabled>
                                    <option value="">请先选择城市</option>
                                </select>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100" disabled id="searchBtn">
                                <i class="fas fa-chart-line"></i> 查看数据分析
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container text-center">
            <p>&copy; 2024 宜居指数分析系统</p>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#province').change(function() {
                var province = $(this).val();
                if (province) {
                    $.get('/api/cities/' + province, function(data) {
                        $('#city').empty().append('<option value="">请选择城市</option>');
                        $.each(data, function(index, city) {
                            $('#city').append('<option value="' + city + '">' + city + '</option>');
                        });
                        $('#city').prop('disabled', false);
                        $('#district').prop('disabled', true).empty().append('<option value="">请先选择城市</option>');
                        $('#searchBtn').prop('disabled', true);
                    });
                } else {
                    $('#city').prop('disabled', true).empty().append('<option value="">请先选择省份</option>');
                    $('#district').prop('disabled', true).empty().append('<option value="">请先选择城市</option>');
                    $('#searchBtn').prop('disabled', true);
                }
            });
            
            $('#city').change(function() {
                var province = $('#province').val();
                var city = $(this).val();
                if (city) {
                    $.get('/api/districts/' + province + '/' + city, function(data) {
                        $('#district').empty().append('<option value="">请选择区县</option>');
                        $.each(data, function(index, district) {
                            $('#district').append('<option value="' + district + '">' + district + '</option>');
                        });
                        $('#district').prop('disabled', false);
                    });
                } else {
                    $('#district').prop('disabled', true).empty().append('<option value="">请先选择城市</option>');
                    $('#searchBtn').prop('disabled', true);
                }
            });
            
            $('#district').change(function() {
                $('#searchBtn').prop('disabled', !$(this).val());
            });
        });
    </script>
</body>
</html>
